import React from "react";
import {Link} from "react-router";
import {Table, Card, Menu, Dropdown, Icon, Modal, message, Tag, Input, Button, Row, Col, Tabs, DatePicker, Form, Select,  Divider} from 'antd';
import BreadcrumbCustom from "../BreadcrumbCustom";
import App from "../../common/App.jsx";
import U from "../../utils";
import Utils from "../../common/Utils";
import "../../assets/css/staff/staffs.less";

const URL = {
    list: 'xxx/xxx',
    key: 'applyId',
    update: 'adm/apply/process',
    first: '员工管理',
    second: "录入员工",
};

const Search = Input.Search;
const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;
export default class Entering extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            textAddr: '', // 联系地址
            textInfo: '', // 备注信息            
        };
    }


    componentDidMount() {
        this.getDetail();
    }

    // 获取详情数据
    getDetail = () => {
        App.api('xxx/xxx', {

        }).then(function (result) {
        
        });
    }

    // 获取城市Option
    hasCity = () => {

    }

    // 选择职业
    handleChangeWork = () => {

    }

    // 选择性别
    handleChangeSex = () => {

    }

    // 选择城市
    handleChangeCity = () => {

    }

    // 选择出生日期
    dateChange = () => {

    }

    // 地址获取
    textAddr = (val) => {
        this.setState({
            
        })
    }

    // 备注信息获取
    textInfo = (val) => {
        this.setState({

        })
    }

    // 提交form表单
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
            console.log('Received values of form: ', values);
            }
        });
    }

    render() {
        const formItemLayout = {
            labelCol: {
              xs: { span: 24 },
              sm: { span: 8 },
            },
            wrapperCol: {
              xs: { span: 0 },
              sm: { span: 16 },
            },
          };
        //   const { getFieldDecorator } = this.props.form;
        return (
            <div>
                <BreadcrumbCustom first={URL.first} second={URL.second}/>
                <Card>
                    <Form onSubmit={this.handleSubmit}>
                        <p className="entering-title">员工信息</p>
                        <FormItem
                            {...formItemLayout}
                            label='选择职务：'
                        >
                            <Select defaultValue="请选择" className={'entering-input'} onChange={(value)=>this.handleChangeWork(value)}>
                                <Option value="1">销售</Option>
                                <Option value="2">工匠</Option>
                            </Select>
                        </ FormItem>
                        <FormItem
                            {...formItemLayout}
                            label='员工姓名：'
                            validateStatus="error"
                            help="请输入正确的姓名"
                        >
                            <Input placeholder="请输入员工姓名" className={'entering-input'}/>
                        </ FormItem> 
                        <FormItem
                            {...formItemLayout}
                            label='员工性别：'
                        >
                            <Select defaultValue="请选择" className={'entering-input'} onChange={(value)=>this.handleChangeSex(value)}>
                                <Option value="1">男</Option>
                                <Option value="2">女</Option>
                            </Select>
                        </ FormItem>
                        <FormItem
                            {...formItemLayout}
                            label='选择城市：'
                        >
                            <Select defaultValue="请选择" className={'entering-input'} onChange={(value)=>this.handleChangeCity(value)}>
                                {this.hasCity()}
                            </Select>
                        </ FormItem>
                        <FormItem
                            {...formItemLayout}
                            label='出生日期：'
                        >
                            <DatePicker onChange={(value) => this.dateChange(value)}  className={'entering-input'}/>
                        </ FormItem>
                        <FormItem
                            {...formItemLayout}
                            label='联系电话：'
                            validateStatus='error'
                            help='请输入正确的电话号码'
                        >
                            <Input placeholder="请输入联系电话" className={'entering-input'}/>
                        </ FormItem>
                        <FormItem
                            {...formItemLayout}
                            label='联系地址：'
                        >
                           <TextArea  className={'entering-input'} rows={6} autosize={{minRows:2,maxRows:6}} placeholder='请输入地址' onChange={(value)=>this.textAddr(value)}/>
                        </ FormItem>
                        <FormItem
                            {...formItemLayout}
                            label='备注信息：'
                        >
                           <TextArea  className={'entering-input'} rows={6} autosize={{minRows:2,maxRows:6}} placeholder='请输入备注信息' onChange={(value)=>this.textInfo(value)}/>
                        </ FormItem> 
                        <div className='Line'>
                            <p className='entering-title'>账户信息</p>
                            <FormItem
                            {...formItemLayout}
                            label='e-mail：'
                            validateStatus='error'
                            help='请输入正确的邮件地址'
                        >   
                            <Input placeholder="请填写用来接收密码的邮件地址" className={'entering-input'}/>
                        </ FormItem>
                        <FormItem {...formItemLayout}>
                            <Button type="primary" htmlType="submit" style={{marginRight:'10px',marginLeft:'40px'}}>保存</Button>
                            <Button onClick={()=>this.props.router.push('app/staffMange/staffs')}> 取消 </Button>                            
                        </FormItem>
                        </div>
                    </Form>
                </Card>
            </div>
        );
    }
}
